<template>
<div>
  <!--按钮-->
  <el-button type="primary" @click="add"
             icon="el-icon-circle-plus-outline">添加</el-button>
  <!--表格-->
  <el-table
    v-loading="loading"
    border
    :data="records"
    style="width: 100%;margin: 20px 0">
    <el-table-column
      align="center"
      type="index"
      label="序号"
      width="80">
    </el-table-column>
    <el-table-column
      prop="tmName"
      label="品牌名称">
    </el-table-column>
    <el-table-column label="品牌logo">
        <template slot-scope="{row}">
          <img :src="row.logoUrl" width="120" height="80">
        </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="{row}">
        <el-button icon="el-icon-edit"
          size="mini" type="warning" @click="update(row)">修改</el-button>
        <el-button
          size="mini"icon="el-icon-delete"
          type="danger" @click="del(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <el-pagination
    style="text-align: center"
    background
    layout="prev, pager, next, jumper,  ->, sizes, total"
    :current-page="page"
    :pager-count="5"
    :page-sizes="[3,6,9]"
    :page-size="limit"
    :total="total"
    @current-change="changePage"
    @size-change="changeSize">
  </el-pagination>
  <!--对话框-->
  <!--<el-dialog :visible="dialogFormVisible" @update:visible="dialogFormVisible = $event"></el-dialog>-->
  <el-dialog :title="form.id?`修改操作`:`添加操作`" :visible.sync="dialogFormVisible">
    <el-form :model="form" :rules="rules" ref="tmForm">
      <el-form-item label="品牌名称" prop="tmName" :label-width="formLabelWidth">
        <!--<el-input :value="form.name" @input="form.name = $event"></el-input>-->
        <el-input v-model="form.tmName" autocomplete="on" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="品牌logo" prop="logoUrl" :label-width="formLabelWidth">
        <!--文件上传组件-->
        <!--action:上传的接口地址-->
        <el-upload
          class="avatar-uploader"
          :action="`${$BASE_API}/admin/product/fileUpload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <!--提示文案-->
          <div class="el-upload__tip" slot="tip">只能上传jpg文件，且不超过50kb</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: 'TrademarkList',
  data() {
    //tmName 自定义的检验规则
    //value : 代表表单中输入的值
    //callback: 决定验证通不通过  如果callback中有参数代表验证不通过 如果callback中没参数代表验证通过
    var validatePass = (rule, value, callback) => {
      if (value === 'lzx') {
        callback("不要输入敏感信息");
      } else {
        callback();
      }
    };



    return {
       page:1, //当前显示哪一页数据
       limit:3,//一页显示多少条
       records:[],//存放品牌信息的数组
       total:0,//品牌的总数量
       loading: false,//控制table的loading动画
       dialogFormVisible:false,//控制上传对话框的显示与隐藏
       formLabelWidth:"120px",//控制表单域标签的的宽度
       form:{
         tmName:"",
         logoUrl:""
       },
      //element ui官方提供的验证
       rules: {
        tmName: [
          { required: true, message: '请输入品牌名称', trigger: 'change' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' },
          { validator: validatePass, trigger: 'change' }
        ],
        logoUrl: [
          { required: true, message: '头像必须上传',trigger: 'blur'}
        ]
       }
    }
  },
  methods:{
    //点击删除要调用的方法
    del(row){
      this.$confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async () => {
        //发请求去删除
        await this.$API.trademark.delTrademarkByID(row.id)
        //请求成功
        this.$message({
          duration:1000,
          type: 'success',
          message: '删除成功!'
        });
        //刷新页面
        // 如果当前页只有1条数据 那删除成功之后要去上一页
        // 如果当前页超过1条数据 那删除成功之后要留在当前页
        let pageNo = (this.records.length > 1 || this.total===1) ? this.page : this.page-1
        this.getAllTrademarkByPage(pageNo)
      }).catch(() => {
        this.$message({
          duration:1000,
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //点击添加和修改按钮最终要调用的方法
    save(){
      //表单检验 当表单检验通过之后 才能执行以下逻辑
      this.$refs.tmForm.validate(async (valid) => {
        //valid : true 代表通过表单检验
        //valid : false 代表没有通过表单检验
        if (valid) {
          //准备新增或修改请求需要的数据
          const trademark = this.form; //有可能有id 有可能没有id
          //发送请求
          await this.$API.trademark.addAndUpdate(trademark);
          //请求成功了 关闭对话框 进行弹窗提示
          this.dialogFormVisible = false//关闭对话框
          this.$message({ //进行弹窗提示
            duration:2000,
            message: `恭喜你，${trademark.id?"修改":"添加"}成功`,
            type: 'success'
          });
          //整个品牌的分页要重新刷新
          const pageNo = trademark.id ? this.page : 1;
          this.getAllTrademarkByPage(pageNo)
        }
      })
    },
    //点击修改按钮
    update(row){
      //显示对话框
      this.dialogFormVisible = true;
      //对对话框中的内容进行回显
      //row就是table中显示的一行行的数据 我们不能直接使用;应该进行一次浅拷贝
      // this.form = row;
      this.form = {...row};
    },
    //点击添加按钮
    add(){
      //清除对话框中内容;应该在添加之前有可能做过修改操作
      this.form = {
        tmName:"",
        logoUrl:""
      }
      //显示对话框
      this.dialogFormVisible = true
      //清除所有的错误信息
      this.$nextTick(()=>{
        //回调函数肯定是在dialogFormVisible引起的界面更新完成的情况下才会执行
        this.$refs.tmForm.clearValidate()
      })
    },
    //改变每页显示数量的函数
    changeSize(size){
      //size:新的每页数量
      this.limit = size;
      //默认显示第一页
      this.getAllTrademarkByPage()
    },
    //改变页码的函数
    changePage(pageNo){
      //pageNo : 当前点击的页码数  显示对应页的数据
      this.getAllTrademarkByPage(pageNo)
    },
    //发请求拿品牌的函数
    async getAllTrademarkByPage(page=1){
      this.page = page;
      //只要状态码不为200 或 20000 都会报错
      try{
        this.loading = true
        const body = await this.$API.trademark.getAllTrademarkByPage(this.page,this.limit)
        this.loading = false
        //状态码一定为200 或 20000 ; 其他情况全部进catch
        this.records = body.data.records;
        this.total = body.data.total
      }catch (e) {
        //做一些弹窗之外的工作
      }
    },
    //上传头像成功之后调用的回调
    handleAvatarSuccess(res, file) {
      //res :上传接口返回的数据
      //上传成功后 应该将上传成功之后的图片显示在界面上
      this.form.logoUrl = res.data;
      this.$refs.tmForm.clearValidate("logoUrl")
    },
    //上传头像之前的钩子 如果返回true则允许调用action指定的接口进行上传操作
    beforeAvatarUpload(file) {
      console.log(file);
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024  < 50;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 50kb!');
      }

      //最终能放行 图片类型必须是jpg 大小必须小于50kb
      return isJPG && isLt2M;
    }
  },
  async mounted(){
    //显示第一页
    this.getAllTrademarkByPage()
  }
}




//mounted生命周期的注释
//如果axios拦截器没有做任何操作;那我们拿到的数据:
/*{
  data: {
    "code": 200,
    "message": "成功",
    "data": {
      "id": 247,
      "tmName": "伪娘团表示不服",
      "logoUrl": "http://182.92.128.115:8080/group1/M00/00/72/rBFUDF-H8Q-AM8GgAAzqhCZiimU793.png"
    },
    "ok": true
  },
  status: 200,
  statusText: 'OK',
  headers: {},
  config: {},
  request: {}
}*/
//因为在响应拦截器中  我们通过 const result = response.data 将返回数据提前解开了一层
/*body:
  {
    "code": 200,
    "message": "成功",
    "data": {
    "id": 247,
      "tmName": "伪娘团表示不服",
      "logoUrl": "http://182.92.128.115:8080/group1/M00/00/72/rBFUDF-H8Q-AM8GgAAzqhCZiimU793.png"
    },
    "ok": true
  }
*/
</script>


<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
